<template>
  <div class="m-tab">
    <ul class="nav clearfix">
      <li v-for="(title, index) in navs" :class="{actived: index === curIndex}" @click="onChangeContent(index)">{{title}}</li>
    </ul>
    <div class="content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      navs: {
        type: Array,
        default() {
          return ['基本信息', '库存信息', '商品主图', '详情描述']
        }
      }
    },
    data() {
      return {
        curIndex: 0
      }
    },
    mounted() {
      $('.tab-item').eq(this.curIndex).fadeIn().siblings().hide()
    },
    methods: {
      onChangeContent(index) {
        if (this.$store.getters.intoThisPage == 1 || this.$store.getters.intoThisPage == 3) {
          this.curIndex = index
          $('.tab-item').eq(this.curIndex).fadeIn().siblings().hide()
          this.$emit('on-change', index)
        } else {
          return
        }
      }
    }
  }
</script>

<style lang="scss">
  .m-tab {
    margin-top: 30px;
    box-shadow: 0 0 10px 0 rgba(12, 6, 12, 0.1);
    .nav {
      height: 38px;
      background: #f7f7f7;
      li {
        float: left;
        width: 116px;
        height: 38px;
        text-align: center;
        line-height: 38px;
        cursor: pointer;
        &.actived {
          background: #fff;
        }
      }
    }
    .content {
      padding: 0 40px;
      background: #fff;
      .tab-item {
        display: none;
      }
    }
  }
</style>